<template>
  <div>
    <el-row>
      <el-col :span="22">
        <div class="sec-title">部门管理</div>
      </el-col>
      <el-col :span="2">
        <div>
          <i class="el-icon-plus sec-blue"></i>
          <el-button type="text">新增</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 筛选条件 -->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
    >
      <el-form-item label="部门名称">
        <el-input
          v-model="formInline.user"
          placeholder="部门名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="部门职务">
        <el-select
          v-model="formInline.region"
          placeholder="部门职务"
        >
          <el-option
            label="人力资源"
            value="a"
          ></el-option>
          <el-option
            label="财政管理"
            value="e"
          ></el-option>
          <el-option
            label="安全保护"
            value="p"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSubmit"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      :data="depts"
      height="590"
    >
      <el-table-column
        prop="deptId"
        label="部门编号"
      >
      </el-table-column>
      <el-table-column
        prop="deptName"
        label="部门名称"
      >
      </el-table-column>
      <el-table-column
        prop="leaderName"
        label="负责人"
      >
      </el-table-column>
      <el-table-column
        prop="deptDesc"
        label="部门描述"
      >
      </el-table-column>
      <el-table-column
        prop="deptNum"
        label="部门人数"
      >
      </el-table-column>
      <el-table-column
        prop="deptTask"
        label="部门职务"
      >
      </el-table-column>
      <el-table-column
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row)"
            type="text"
            size="small"
          >详情</el-button>
          <el-button
            type="text"
            size="small"
          >修改</el-button>
          <el-button
            type="text"
            size="small"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="1000"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      depts: [
        {
          deptId: "23892839",
          deptName: "梁山2区1部",
          leaderId: "123",
          leaderName: "zhangsan",
          deptDesc: "白班巡逻",
          deptNum: "100",
          deptTask: "巡逻",
        },
        {
          deptId: "23892839",
          deptName: "梁山中心1区",
          leaderId: "123",
          leaderName: "zhangsan",
          deptDesc: "人员调度",
          deptNum: "100",
          deptTask: "调度",
        },
        {
          deptId: "23892839",
          deptName: "梁山2区2部",
          leaderId: "123",
          leaderName: "zhangsan",
          deptDesc: "夜班巡逻",
          deptNum: "100",
          deptTask: "巡逻",
        }
      ],
       formInline: {
          user: '',
          region: ''
        }
    };
  },
  methods: {
    onSubmit() {
        console.log('submit!');
      }
  },
};
</script>

<style lang="css" scoped>
.sec-blue {
  color: #409eff;
}
.sec-title {
  font-size: 18px;
  font-weight: 700;
}
</style>